<template>
  <div class="buttonAddWrap">
    <el-dialog class="do-dialog" @opened="$store.commit('dialogTop')" title="新增" :visible.sync="dialogFormVisibleAdd" :close-on-click-modal="false" @close="addDialogClose('ruleFormAdd')">
      <el-form :model="ruleFormAdd" :rules="rulesAdd" ref="ruleFormAdd" label-width="80px" class="demo-ruleForm">
        <el-form-item label="用户名称" prop="userNo" :rules="[{ 'required':true, 'message': '请选择用户名称','trigger': 'blur'  }]">
          <el-select v-model="ruleFormAdd.userNo" size="mini" clearable placeholder="请选择">
            <el-option
              v-for="item in this.$store.state.companyInfos"
              :key="item.enterpriseNo+''"
              :label="item.enterpriseName"
              :value="item.enterpriseNo+''">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执法时间" prop="punishTime" :rules="[{ 'required':true, 'message': '请选择执法时间','trigger': 'blur' }]">
          <el-date-picker
            v-model="ruleFormAdd.punishTime"
            style="width: 100%;"
            align="right"
            type="datetime"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择"
            :picker-options="$store.state.pickerOptions0">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="案件地点" prop="punishAddress" :rules="[{ 'required':true, 'message': '请输入案件地点', }]">
          <el-input
            :maxlength="200"
            placeholder="请输入案件地点"
            v-model="ruleFormAdd.punishAddress">
          </el-input>
        </el-form-item>

        <el-form-item label="处罚原因" prop="punishReason" :rules="[{ 'required':true, 'message': '请输入处罚原因', }]">
          <el-input
            type="textarea"
            :maxlength="500"
            :rows="3"
            placeholder="请输入处罚原因"
            v-model="ruleFormAdd.punishReason">
          </el-input>
        </el-form-item>

        <el-form-item label="案件图片" prop="image">
          <div class="iUpload">
            <el-upload 
              action="#" 
              list-type="picture-card" 
              multiple 
              :file-list="imageList"
              :auto-upload="false" 
              :on-change="handleFileImage"
              :on-preview="handlePreview"
              :on-remove="handleRemoveImage"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="处罚方式" prop="punishWay" :rules="[{ 'required':true, 'message': '请选择处罚方式','trigger': 'blur'  }]">
          <el-select v-model="ruleFormAdd.punishWay" size="mini" clearable placeholder="请选择">
            <el-option
              v-for="item in punishWayList"
              :key="item.value+''"
              :label="item.label"
              :value="item.value+''">
            </el-option>
          </el-select>
        </el-form-item>        
        <el-form-item label="处罚金额" prop="punishMoney" :rules="[{ 'required':true, 'message': '请输入处罚金额','trigger': 'blur'}, {pattern: /^([0-9]*)$/, message: '请填写大于等于0的整数'}]" v-if="ruleFormAdd.punishWay==1">
          <el-input clearable size="mini" v-model.number="ruleFormAdd.punishMoney" type="number" min="0" style="width:90%;" auto-complete="off" placeholder="处罚金额"></el-input>
        </el-form-item>

        <el-form-item label="" prop="notice">
          <div class="iUpload notice">
            <el-upload
              action="#" 
              list-type="picture-card" 
              multiple 
              :file-list="noticeList"
              :auto-upload="false" 
              :on-change="handleFileNotice"
              :on-preview="handlePreview"
              :on-remove="handleRemoveNotice"
            >
              <el-button size="small" type="primary">开具行政处罚通知书（上传）</el-button>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            :maxlength="500"
            :rows="3"
            placeholder="请输入备注"
            v-model="ruleFormAdd.remark">
          </el-input>
        </el-form-item>
        <el-form-item></el-form-item>
        <div style="text-align: center; margin-bottom: 3px;">
          <el-button type="primary" @click="submitForm('ruleFormAdd')">提交</el-button>
          <el-button @click="addDialogClose('ruleFormAdd')">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog class="image-preview" :visible.sync="visibleImage">
      <img width="100%" :src="imageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props:[],
    data () {
      return {
        visibleImage: false,
        imageUrl: '',

        punishWayList: [
          {
            value: '0',
            label: '警告'
          }, {
            value: '1',
            label: '罚款'
          }
        ],
        ruleFormAdd: {
          userNo: '',
          punishTime: '',
          punishAddress: '',
          punishReason: '',
          punishWay: '0',
          punishMoney: 0,
          remark: '',
        },

        imageList: [],
        noticeList: [],

        dialogFormVisibleAdd: false,
        rulesAdd: {}
      }
    },
    components: {},
    methods: {
      getfileId(id){
        this.ruleFormAdd.fileId=id
      },
      //关闭回调
      addDialogClose(formName){
        this.$refs[formName].resetFields();
        this.dialogFormVisibleAdd = false
        this.imageList  = []
        this.noticeList = []
      },
      //提交回调
      doSubmit(){
        var data = new FormData(), post={};
        data.append('userNo',         this.ruleFormAdd.userNo)
        data.append('punishTime',     this.ruleFormAdd.punishTime)
        data.append('punishAddress',  this.ruleFormAdd.punishAddress)
        data.append('punishReason',   this.ruleFormAdd.punishReason)
        data.append('punishWay',      this.ruleFormAdd.punishWay)
        data.append('punishMoney',    this.ruleFormAdd.punishWay==0 ? 0 : parseInt(this.ruleFormAdd.punishMoney) * 100)
        data.append('remark',         this.ruleFormAdd.remark)
        data.append('punishTarget',   0)

        post={
          userNo        : this.ruleFormAdd.userNo,
          punishTime    : this.ruleFormAdd.punishTime,
          punishAddress : this.ruleFormAdd.punishAddress,
          punishReason  : this.ruleFormAdd.punishReason,
          punishWay     : this.ruleFormAdd.punishWay,
          punishMoney   : this.ruleFormAdd.punishWay==0 ? 0 : parseInt(this.ruleFormAdd.punishMoney) * 100,
          remark        : this.ruleFormAdd.remark,
          punishTarget  : 0,
        };

        data.append('sign',           this.makeSign(post))

        // 补充图片
        if(this.imageList.length > 0){
          for(var i in this.imageList){
            data.append('imagesFile', this.imageList[i].raw)
          }
        }

        if(this.noticeList.length > 0){
          for(var i in this.noticeList){
            data.append('noticeFile', this.noticeList[i].raw)
          }
        }

        this.axios({
          method: 'post',
          url: process.env.API_HOST + `/punish/insertPunish`,
          timeout: 20000,
          headers:{'content-type':'multipart/form-data'},
          data: data,
        }).then(response=>{
            if(response.data.code==200){
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.$emit('searchRowsInfo')
              this.dialogFormVisibleAdd = false
              this.imageList  = []
              this.noticeList = []
            }
          })
          .catch(error=>{
            console.log(error);
          });
      },

      // 预览
      handlePreview(file){
        this.imageUrl     = file.url;
        this.visibleImage = true;
      },
      // 删除
      handleRemove(key, file, fileList){
        this[key] = fileList
      },
      handleRemoveImage(file, fileList){
        this.handleRemove('imageList', file, fileList)
      },
      handleRemoveNotice(file, fileList){
        this.handleRemove('noticeList', file, fileList)
      },

      // 选择文件
      handleFile(key, file, fileList){
        this[key] = fileList
      },
      handleFileImage(file, fileList){
        this.handleFile('imageList', file, fileList)
      },
      handleFileNotice(file, fileList){
        this.handleFile('noticeList', file, fileList)
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.doSubmit()
          } else {
            return false;
          }
        });
      },
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .buttonAddWrap
    display inline-block
    margin-left 10px
</style>